import { defineComponent, reactive, toRefs } from "vue";
import PageTitle from "@/components/PageTitle";
import zcIcon from "./assets/zc-icon.png";
import textIcon from "./assets/text-icon.png";
import eye from "./assets/eye.png";
import CardView from "@/components/CardView";
import FilterMenuSearch from "@/components/FilterMenuSearch";
import InfoCellGray from "@/components/InfoCellGray";
import TextView from "@/components/TextView";
import RowView from "@/components/RowView";
// import { useRequest } from "./request";
import { useRouter } from "vue-router";
import { IFilterMenuChoose } from "@/components/FilterMenu/types";
import ListView from "@/components/ListView";
import { getUserInfoUrl } from "@/command/apiTool";
// import { title } from "process";
export default defineComponent({
  setup(props, {}) {
    const router = useRouter();
    const form = reactive({});

    const render1 = () => {
      return (
        <div class={"relative"}>
          <img src={zcIcon} class={"w-full"} />
          <div class={"absolute z-30 top-9 ml-22"}>
            <img src={textIcon} alt="" class={"w-[156px]"} />
          </div>
        </div>
      );
    };
    const renderItem = (e: any) => {
      const data = {
        title: e.title,
        text: e.content,
      };
      return (
        <div
          onClick={() => router.push(`/helpPolicyDetails?id=${e.id}`)}
          class={"w-full"}
        >
          <InfoCellGray {...data} limitedNumber={3}>
            <TextView>{e.time}</TextView>
            <RowView>
              <img src={eye} class="w-[14px] h-[14px]" />
              <TextView class="ml-[5px]">{e.clickSum}</TextView>
            </RowView>
          </InfoCellGray>
        </div>
      );
    };
    const render2 = () => {
      const data: IFilterMenuChoose[] = [
        { type: "policyType", key: "type", title: "类型" },
        { type: "datePicker", key: "time" },
      ];
      return (
        <CardView class={"-mt-[100px] z-10"} title="政策列表">
          <FilterMenuSearch choose={data} v-model={form} searchKey="title" />
          <ListView
            {...getUserInfoUrl({
              dh: "/api/H5/richHelpPolicy/large/listResult",
              xh: "/api/H5/richHelpPolicy/small/listResult",
            })}
            type="page"
            renderItem={renderItem}
            class={"mt-[20px]"}
            itemHeight={120}
            params={form}
          />
        </CardView>
      );
    };
    return () => (
      <PageTitle title="帮政策" childClass="!p-[0px]">
        {render1()}
        {render2()}
      </PageTitle>
    );
  },
});
